<template>
    <div class="register">
        <div class="header1">
                <span>exCitiLoan | 易旗贷</span>
                <span @click="toHome" >返回</span>
        </div>
<!-- 企业机构名称；
2、统一社会信用代码；
3、地址（企业注册地址）；
4、法人代表（姓名+身份证号）； -->
<div class = "f">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm" size="small">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="credit">
                <el-input v-model="ruleForm.credit"></el-input>
            </el-form-item>
            <el-form-item label="企业机构名称" prop="cname">
                <el-input v-model="ruleForm.cname"></el-input>
            </el-form-item>
            <el-form-item label="统一社会信用代码" prop="code">
                <el-input v-model="ruleForm.code"></el-input>
            </el-form-item>
            <el-form-item label="企业注册地址" prop="address">
                <el-input v-model="ruleForm.address"></el-input>
            </el-form-item>
            <el-form-item label="法人代表姓名" prop="fname">
                <el-input v-model="ruleForm.fname"></el-input>
            </el-form-item>
            <el-form-item label="法人代表身份证号" prop="fcredit">
                <el-input v-model="ruleForm.fcredit"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
        </div>
    </div>
</template>
<script>
export default {
      // eslint-disable-next-line vue/multi-word-component-names
    name:'Register',
    data() {
        return {
        ruleForm: {
            name: '',
            credit: '',
            cname:'',
            code:'',
            address: '',
            fname:'',
            fcredit:''
        },
        rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
          credit: [
            { required: true, message: '请输入身份证号', trigger: 'blur' },
            { min: 18, max: 18, message: '输入格式错误', trigger: 'blur' }
          ],
          cnmae: [
            { required: true, message: '请输入企业机构名称', trigger: 'blur' }
          ],
          code: [
            { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
            { min: 18, max: 18, message: '输入格式错误', trigger: 'blur' }
          ],
          address: [
            { required: true, message: '请输入企业注册地址', trigger: 'blur' }
          ],
          fname: [
            { required: true, message: '请输入法人代表姓名', trigger: 'blur' }
          ],
          fcredit: [
            { required: true, message: '请输入法人代表身份证号', trigger: 'blur' }
          ]
          
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        //todo
        this.$router.push({name:'creditRating'})
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      toHome(){
            this.$router.push({name:'creditRating'});
        }
    }
  }
</script>
<style lang="less" scoped>
.header1{
    display:flex;
    justify-content: space-between;  //两端对齐
    align-items:center;    // 在竖直方向上在交叉轴中点对齐
    width:100%;
    height:60px;
    background-color:rgb(34, 76, 190);
    span{
        color:white;
        margin-left: 20px;
        margin-right:20px;
    }
    margin-bottom: 30px;
}
.f{
    width:900px;
    margin:auto;
}
</style>